<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>

    <style>
        /* 
            距离问题 : 距离 [外 | 内]
         */
        ul{
            /* 
                padding 只的是一个元素里面的内容或者子元素与边框距离 
                组合属性 ： 四大方向 
            */
            padding-left: 0px;
            list-style-type: none;
            border-left-color: red;
            border-left-style: solid;
            border-left-width: 1px;
        }
        li{
            /* 
                margin 当前元素 与其它元素的边框与边框的距离 外
                组合属性 ： 四大方向 
            */
            margin-left:3px;
            /* 浮动 */
            float: left;
        }
        li > a{padding:5px;width:80px;height:80px;margin:3px;border: 1px solid blanchedalmond;}
        li > a:link{color:black;font-size: 1.1em;text-decoration: none;}
        li > a:hover{color:lightgreen;font-size: 1.2em;text-decoration: none;}
    </style>
    
    <ul>
        <li><a href="">新闻</a></li>
        <li><a href="">机车</a></li>
        <li><a href="">二次元</a></li>
        <li><a href="">游戏</a></li>
    </ul>

</body>
</html>